<template>
  <div>
    <!-- FIB题型 -->
    <div>
      <div class="h60">
        <span class="exe_title">{{ Num }}.{{ item.title }}</span>
        <span class="tags">
          <el-tag class="jj-bg" v-if="item.isJt == 1">机经</el-tag>
          <el-tag class="yc">预测</el-tag>
          <el-tag class="ttNum">{{ item.titleNumber }}</el-tag>
        </span>
      </div>
      <div class="player">
        <Audioplayer v-if="item.url" :url="item.url"></Audioplayer>

        <h1 v-else class="none_audio_tip">此题暂未上传录音</h1>
      </div>
      <!-- FIB -->
      <!-- 阅读填空区域 -->
      <el-form>
        <div class="fill-in-blank">
          <span
            v-for="(item, index) in contentFIB"
            :key="index"
            ref="spans"
            class="content-item"
            >{{ item }}
            <span class="position" v-if="index + 1 < contentFIB.length">
              <input class="ipts" ref="ipts" @input="getVal" />
            </span>
          </span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Audioplayer from '../../player'
export default {
  props: ['url', 'item', 'Num'],
  components: {
    Audioplayer,
  },
  data () {
    return {
      contentFIB: [],
      answerList: []
    }
  },
  created () {
    this.handleData()
  },
  mounted () {
    if (this.item.answer) {
      // 回显答案
      this.item.answer.split(',').forEach(ele => {
        this.answerList.push(ele)
      })
      this.$refs.ipts.forEach((item, index) => {
        item.value = this.answerList[index]
      })
    }

  },

  methods: {
    getVal () {
      let ary = []
      this.$refs.ipts.forEach(item => {
        console.log(item.value);
        ary.push(item.value)
      });
      console.log(ary);
      this.answerList = [...ary]
      console.log(this.answerList.length, this.$refs.ipts.length, 88);
      let len = 0
      for (var i = 0; i < this.answerList.length; i++) {
        if (this.answerList[i] !== '') {
          len++
        }
      }
      console.log(len, this.$refs.ipts.length, 88);


      if (len < this.$refs.ipts.length) {
        this.$emit('nodone')
      } else {
        //  this.$emit('sendNum', this.answerList.length)
        this.$emit('sendAnswer', this.answerList.join(','))

        // 答案个数是否不足
        this.$emit('sendAnswerLen', this.answerlen < this.answerList.length)

      }
    },
    handleData () {
      if(this.item.content){
        this.contentFIB = this.item.content.split('(PARAM)')
      }

    },
  },
}
</script>

<style lang="less" scoped>
.none_audio_tip {
  font-size: 1.25rem;
  color: #999;
  padding: 1.125rem;
}
.player {
  margin-bottom: 1rem;
  border: 1px dashed #ff5e4e;
  background-color: #fffafa;
}
.ipts {
  padding: 0.1875rem 0.625rem;
  border-radius: 0.3125rem;
  width: 10rem;
  border: 1px solid #ddd;
  font-size: 1.125rem;
  text-align: center;
  z-index: 999999;
}
.fill-in-blank {
  font-size: 1.125rem;
  color: #666;
  line-height: 3.125rem;
  width: 54rem;
  .content-item {
    flex-wrap: wrap;
  }
  .el-select {
    width: 10.25rem;
    height: 2.5rem;
  }
  /deep/.el-input__inner {
    border-radius: 0;
    padding-left: 1.875rem;
  }
}
.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  background-color: #f7f7f7;
  margin-top: 1.875rem;
  display: flex;
  margin-bottom: 1rem;
  .label {
    height: 100%;
  }
  .tags {
    width: 36.625rem;
  }
  .exe_title {
    width: 90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
    padding-left: 1.25rem;
  }
  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }

  .ttNum {
    background-color: #94d0f7;
  }
  .jj-bg {
    background: #ff9b4f;
  }
  .yc {
    background-color: #00cccc;
  }
}
</style>